import React from 'react';
import { Spin } from 'antd';

// 定义HOC的Props接口
interface WithLoadingProps {
    loading?: boolean;
}

// 高阶组件：添加加载状态
export function withLoading<P extends object>(
    WrappedComponent: React.ComponentType<P>
): React.FC<P & WithLoadingProps> {
    return function WithLoadingComponent(props: P & WithLoadingProps) {
        const { loading, ...componentProps } = props;

        if (loading) {
            return (
                <div style={{ textAlign: 'center', padding: '50px 0' }}>
                    <Spin size="large" />
                </div>
            );
        }

        return <WrappedComponent {...(componentProps as P)} />;
    };
}

// 使用示例组件
interface ExampleComponentProps {
    title: string;
    content: string;
}

export const ExampleComponent: React.FC<ExampleComponentProps> = ({ title, content }) => (
    <div>
        <h3>{title}</h3>
        <p>{content}</p>
    </div>
);

// 使用HOC创建新组件
export const LoadingExampleComponent = withLoading(ExampleComponent); 